<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
  <common-head></common-head>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
  const CommonFoot={
    template:`
    <div>
      <h3>我是底部组件</h3>
      <button @click="adds">按钮</button>
      {{add}}
    </div>
    `,
    data(){
      return{
        add:'人生就像一场戏'
      }
    },
    methods: {
      adds(){
        this.add='因为有缘才相聚'
      }
    },
    watch:{
      add(){
        console.log( 'add改变了' );
      }
    }
  }
  const CommonTitle={
    template:`
      <div>
        <h2>
          这是标题组件
          {{title}}
        </h2>
      </div>
    `,
    data(){
      return {
        title:'我是谁，你又是谁'
      }
    }
  }
  Vue.component('CommonHead',{
    template:`
    <div>
      <h1>我是头组件</h1>
      {{msg}}<br/><br/>
      <button @click="choanMsg">改变</button>
      <hr/>
      <common-title></common-title>
      <hr/>
      <common-foot></common-foot>
      <hr/>
      <common-foot></common-foot>
      
    </div>
    `,
    data(){
      return {
        msg: '你好组件'
      }
    },
    methods:{
      choanMsg(){
        this.msg='你好世界！！'
      }
    },
    components:{
      CommonTitle,
      CommonFoot
    }
  })
const vm = new Vue ( {
  el: '#app',
} )
</script>
</html>